.achievement {
  width: 100%;
  height: 100%;
  @extend .et-flex-column-start;
  .title-content {
    width: 100%;
    height: 7%;
    position: relative;
    .title_box {
      width: 100%;
      height: 100%;
      border-bottom: 1px solid #bbb;
      font-size: 18px;
      flex-shrink: 0;
      @extend .et-flex-center;
    }
    .logout {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      font-size: 14px;
      color: white;
      background-color: $primary-color;
      padding: 4px 8px;
      border-radius: 5px;
    }
  }
  .firstLoading {
    flex: 1;
    width: 100%;
    @extend .et-flex-column-center;
    span {
      margin-top: 0.2rem;
    }
  }
  .head_box {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    .header-bg {
      width: 100%;
      display: block;
    }
    .head_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      @extend .et-flex-column-start;
      justify-content: center;
      .top_box {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 14px;
        margin-bottom: 10px;
      }

      .body_box {
        width: 100%;
        text-align: center;
        font-size: 48px;
        color: white;
      }

      .bottom_box {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: white;
      }
    }
  }

  .table-header {
    flex-shrink: 0;
    background-color: #f3f3f3;
    width: 100%;
    @extend .et-flex-start;

    .header-col {
      flex: 1;
      padding: 10px 0;
      font-size: 14px;
      min-height: 2.8em;
      @extend .et-flex-center;
      text-align: center;

      &:not(:first-child) {
        border-left: 1px solid #ececec;
      }
    }
  }

  .container {
    flex: 1;
    width: 100%;
    overflow-y: auto;

    .table-box {
      width: 100%;
      min-height: calc(100vh - 335px);
      @extend .et-flex-column-start;

      .table-row {
        width: 100%;
        &:first-child {
          border-top: 1px solid #ececec;
        }
        border-bottom: 1px solid #ececec;
        &:nth-child(2n) {
          background-color: #f3f3f3;
        }
        @extend .et-flex-start;
        align-items: stretch;
        .table-col {
          flex: 1;
          padding: 10px 5px;
          @extend .et-flex-center;
          text-align: center;
          line-height: 1.4;
          &:not(.pay_time) {
            word-break: break-all;
          }

          &:not(:first-child) {
            border-left: 1px solid #ececec;
          }
        }
      }
    }
  }
}
